<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="search" label-width="100px" class="demo-form-inline">
          <el-form-item :label="$t('customer')">
            <el-input v-model.trim="search.custName" :placeholder="$t('customer')" clearable />
          </el-form-item>
          <el-form-item :label="$t('packageType')">
            <el-input v-model.trim="search.packageType" :placeholder="$t('packageType')" clearable />
          </el-form-item>
          <el-form-item :label="$t('Inspectionlevel')">
            <el-select v-model.trim="search.level" :placeholder="$t('Inspectionlevel')" clearable>
              <el-option
                v-for="item in levelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: {},
      levelList: Object.freeze([{
        value: 'I',
        label: 'I'
      }, {
        value: 'II',
        label: 'II'
      }, {
        value: 'III',
        label: 'III'
      }, {
        value: 'S-1',
        label: 'S-1'
      }, {
        value: 'S-2',
        label: 'S-2'
      }, {
        value: 'S-3',
        label: 'S-3'
      }, {
        value: 'S-4',
        label: 'S-4'
      }])
    }
  },
  methods: {
    doSearch() {
      this.$emit('doSearch', this.search)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";

.el-row {
  min-height: 46px;
  padding: 10px;
  background-color: #fff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-collapse-transition {
  position: relative;
  .el-date-picker {
    position: absolute;
    top: 50px;
  }
}
.el-form-item {
  margin-bottom: 0;
}
</style>
